<script setup>
import {onMounted, reactive, ref} from "vue";
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";
//表格数据
const tableData=ref([])
const tableDataRef=ref()
onMounted(()=>{
  getall()
})
//新增按钮
const addBtn=ref(false)
//搜索表单
const SearchMeetingroomRef=ref()
const SearchMeetingroom=reactive({
  leader:'',
  department:'',
  date:''
})
const MeetingroomRef=ref()
const Meetingroom=reactive({
  id:'',
  leader:'',
  department:'',
  date:'',
  location:'',
  content:'',
  reception:'',
  receptionnumber:'',
  accompany:'',
  accompanynumber:'',
  support:'',
  status:''
})
const UpdateMeetingRoomRef=ref()
const UpdateMeetingRoom=reactive({
  id:'',
  leader:'',
  department:'',
  date:'',
  location:'',
  content:'',
  reception:'',
  receptionnumber:'',
  accompany:'',
  accompanynumber:'',
  support:'',
  status:''
})
//表单校验规则
const MeetingroomRules=reactive({
  leader:[
    { required: true, message: '请输入活动接待负责人', trigger: 'blur' },
    {max:10,message:'只能输入10个字符',trigger:'blur'},
  ],
  department:[
    { required: true, message: '请输入负责部门', trigger: 'blur' },
  ],
  location:[
    { required: true, message: '请输入接待地点', trigger: 'blur' },
    {max:30,message:'只能输入30个字符',trigger:'blur'},
  ],
  date:[
    { required: true, message: '请输入接待日期', trigger: 'blur' },
  ],
  content :[
    { required: true, message: '请输入来访内容', trigger: 'blur' },
    {max:30,message:'只能输入30个字符',trigger:'blur'},
  ],
  reception :[
    { required: true, message: '请输入接待对象', trigger: 'blur' },
    {max:100,message:'只能输入100个字符',trigger:'blur'},
  ],
  receptionnumber :[
    { required: true, message: '请输入接待对象人数', trigger: 'blur' },
    { pattern : /^\d{1,3}$/ ,
      message: '最多输入3个字符',
      trigger: 'blur' },
  ],
  accompany :[
    { required: true, message: '请输入陪同人员', trigger: 'blur' },
    {max:100,message:'只能输入100个字符',trigger:'blur'},
  ],
  accompanynumber :[
    { required: true, message: '请输入陪同人员人数', trigger: 'blur' },
    { pattern : /^\d{1,3}$/ ,
      message: '最多输入3个字符',
      trigger: 'blur' },
  ],
  support :[
    { required: true, message: '请输入后勤保障', trigger: 'blur' },
    {max:30,message:'只能输入30个字符',trigger:'blur'},
  ],
})
//分页的数据模型
const pageFormModel =reactive({
  total : '',
  size : '',
  currentPage : '',
  pages : ''
})
//分页的提交数据模型
const pageSubFormModel =reactive({
  size : '',
  currentPage : '',
})
//分页--------------------------------------------------
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val) => {
  pageSubFormModel.size=val
  //alert(`${pageSubFormModel.size} 每页条目数`)
  getallPage()
}
const handleCurrentChange = (val) => {
  pageSubFormModel.currentPage=val
  //alert(`当前页: ${pageSubFormModel.current}`)
  getallPage()
}
//搜索按钮
const searchBtn = () => {
  getall()
}
//搜索按钮
const getall = () => {
  request({
    url:'/systemdailyman/meetingsign/getallmeetingsign',
    method:'GET',
    params:SearchMeetingroom
  }).then(req=>{
    if (200==req.data.errorCode){
      tableData.value=req.data.data.records
      pageFormModel.total = req.data.data.total
      pageFormModel.size = req.data.data.size
      pageFormModel.currentPage = req.data.data.currentPage
      pageFormModel.pages = req.data.data.pages
    }
  })
}
//分页
const getallPage = () => {
  request({
    url:'/systemdailyman/meetingsign/getallmeetingsign',
    method:'GET',
    params:pageSubFormModel
  }).then(req=>{
    if (200==req.data.errorCode){
      tableData.value=req.data.data.records
      pageFormModel.total = req.data.data.total
      pageFormModel.size = req.data.data.size
      pageFormModel.currentPage = req.data.data.currentPage
      pageFormModel.pages = req.data.data.pages
    }
  })
}
//新增增模态框取消按钮
const ResultBtn = () => {
  MeetingroomRef.value.resetFields()
}
//新增模态框提交按钮
const AddSubmit=()=>{
  MeetingroomRef.value.validate((valid,fields)=>{
    if(valid){
      request({
        url:'http://localhost:8092/systemdailyman/meetingsign/addmeetingsign',
        method:'PUT',
        data:Meetingroom,
        headers:{'content-type':"application/json;charset:UTF-8"},
      }).then(req=>{
        ElMessage({
          type: 'success',
          message: '新增成功！'
        })
        //提交后清空表单
        MeetingroomRef.value.resetFields()
        //关闭模态框
        addBtn.value=false
        //刷新数据
        getall()
      })
    }
  })
}
const meetingEdit=ref(false)
const getmeetingEdit=ref(false)
//修改按钮
const updatemeeting = (rowIndex , rowData) => {
  UpdateMeetingRoom.id = rowData.id
  UpdateMeetingRoom.leader = rowData.leader
  UpdateMeetingRoom.date = rowData.date
  UpdateMeetingRoom.location=rowData.location
  UpdateMeetingRoom.content=rowData.content
  UpdateMeetingRoom.department = rowData.department
  UpdateMeetingRoom.reception = rowData.reception
  UpdateMeetingRoom.receptionnumber = rowData.receptionnumber
  UpdateMeetingRoom.accompany = rowData.accompany
  UpdateMeetingRoom.accompanynumber=rowData.accompanynumber
  UpdateMeetingRoom.support=rowData.support
  UpdateMeetingRoom.status=rowData.status

  meetingEdit.value=true
}
//修改模态框提交按钮
const updateSubmit = () => {
  UpdateMeetingRoomRef.value.validate((valid,fields)=>{
    if (valid){
      request({
        url:'http://localhost:8092/systemdailyman/meetingsign/updatemeetingsign',
        method:'PUT',
        data:UpdateMeetingRoom,
        headers:{'content-type':"application/json;charset:UTF-8"},
      }).then(req=>{
        ElMessage({
          type: 'success',
          message: '修改成功！'
        })
        meetingEdit.value=false
        getall()
      })
    }
  })
}
//删除按钮
const deletameeting = (rowIndex , rowData) => {
  console.log("-------------")
  console.log(rowIndex)
  console.log(rowData)

  Meetingroom.id=rowData.id
  ElMessageBox.confirm(
      '确定要删除此条预约信息吗？',
      '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )  .then(() => {
    request({
      url:'http://localhost:8092/systemdailyman/meetingsign/deletemeetingsign/'+rowData.id,
      method:'delete'
    }).then(req=>{
      ElMessage({
        type: 'success',
        message: '确认删除',
      })
      getall()
    })
  })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}
//查看按钮
const getmeeting = (rowIndex , rowData) => {
  UpdateMeetingRoom.id = rowData.id
  UpdateMeetingRoom.leader = rowData.leader
  UpdateMeetingRoom.date = rowData.date
  UpdateMeetingRoom.location=rowData.location
  UpdateMeetingRoom.content=rowData.content
  UpdateMeetingRoom.department = rowData.department
  UpdateMeetingRoom.reception = rowData.reception
  UpdateMeetingRoom.receptionnumber = rowData.receptionnumber
  UpdateMeetingRoom.accompany = rowData.accompany
  UpdateMeetingRoom.accompanynumber=rowData.accompanynumber
  UpdateMeetingRoom.support=rowData.support
  UpdateMeetingRoom.status=rowData.status

  getmeetingEdit.value=true
}
</script>

<template>
<div class="bg">
  <el-form
      ref="SearchMeetingroomRef"
      :model="SearchMeetingroom"
  >
    <el-row>
      <el-col :span="8" >
        <el-form-item prop="leader" label="负责接待人">
          <el-input v-model="SearchMeetingroom.leader"  style="width: 180px" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" >
        <el-form-item prop="department" label="部门">
          <el-input v-model="SearchMeetingroom.department"  style="width: 180px" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" >
        <el-form-item prop="date" label="日期">
          <el-date-picker
              v-model="SearchMeetingroom.date"
              type="datetime"
              clearable
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4" :offset="20">
        <el-button @click="searchBtn" type="primary">查询</el-button>
        <el-button @click="addBtn=true" type="primary">新增</el-button>
      </el-col>
    </el-row>
  </el-form>
  <el-table :data="tableData" ref="tableDataRef" stripe border style="height: 100%;width:900px;margin-top: 10px" :header-cell-style="{'text-align':'center'}">
    <el-table-column prop="id" label="编号" width="80"  v-if="false"/>
    <el-table-column prop="leader" label="接待人" width="100"  />
    <el-table-column prop="department" label="申请部门" width="100"  />
    <el-table-column prop="location" label="接待地点" width="100"  />
    <el-table-column prop="date" label="接待日期" width="100"  />
    <el-table-column prop="content" label="来访内容" width="100"  />
    <el-table-column prop="support" label="后勤保障" width="100"  />
    <el-table-column prop="status" label="状态" width="100" >
      <template #default="scope">
        <span v-if="scope.row.status=='-1'" style="color: red">已驳回</span>
        <span v-if="scope.row.status=='1'" style="color: #4cae4c">已通过</span>
        <span v-if="scope.row.status=='0'" style="color: #007bff">待审批</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button type="primary"  :disabled="scope.row.status != '-1'" size="small" @click="updatemeeting(scope.$index, scope.row)">修改</el-button>
        <el-button type="danger"  :disabled="scope.row.status != '-1'" size="small" @click="deletameeting(scope.$index, scope.row)">删除</el-button>
        <el-button type="success"  size="small" @click="getmeeting(scope.$index, scope.row)">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页按钮 -->
  <el-pagination background
                 size="large"
                 style="margin-top: 30px;margin-left: 15%;"
                 v-model:current-page="pageFormModel.currentPage"
                 v-model:page-size="pageFormModel.size"
                 :page-sizes="[10]"
                 :disabled="disabled"
                 :background="background"
                 layout="total, sizes, prev, pager, next, jumper"
                 :total=pageFormModel.total
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
  />
</div>
  <el-dialog
      v-model="addBtn"
      title="新增会议招待">
    <el-form
        ref="MeetingroomRef"
        :model="Meetingroom"
        :rules="MeetingroomRules"
        label-width="auto"
        :inline="true"
    >
      <el-form-item prop="leader" label="接待负责人" >
        <el-input v-model="Meetingroom.leader" placeholder="请输入接待负责人" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="department" label="申请部门" >
        <el-select v-model="Meetingroom.department" placeholder="请选择申请部门" style="width: 200px" clearable>
          <el-option label="管理部" value="管理部"></el-option>
          <el-option label="行政部" value="行政部"></el-option>
          <el-option label="IT部" value="IT部"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="location" label="接待地点" >
        <el-input v-model="Meetingroom.location" placeholder="请输入接待地点" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="date" label="接待日期" >
        <el-date-picker
            placeholder="请选择接待日期"
            v-model="Meetingroom.date"
            type="datetime"
            clearable
            style="width: 200px"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item prop="reception" label="接待对象" >
        <el-input v-model="Meetingroom.reception" placeholder="请输入接待对象" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="receptionnumber" label="接待对象人数" >
        <el-input v-model="Meetingroom.receptionnumber" type="number" placeholder="请输入接待对象人数" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="accompany" label="陪同人员" >
        <el-input v-model="Meetingroom.accompany" placeholder="请输入陪同人员" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="accompanynumber" label="陪同人员人数" >
        <el-input v-model="Meetingroom.accompanynumber" type="number" placeholder="请输入陪同人员人数" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="content" label="来访内容" >
        <el-input v-model="Meetingroom.content" placeholder="请输入来访内容" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="support" label="后勤保障" >
        <el-input v-model="Meetingroom.support" placeholder="请输入后勤保障" style="width: 200px" clearable></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="AddSubmit" >提交</el-button>
    <el-button type="primary" @click="ResultBtn" >取消</el-button>
  </el-dialog>
  <el-dialog
      v-model="meetingEdit"
      title="修改会议招待"
      label-width="auto"
  >
    <el-form ref="UpdateMeetingRoomRef"
             :model="UpdateMeetingRoom"
             label-width="auto"
             :inline="true"
             :rules="MeetingroomRules">
      <el-form-item prop="leader" label="接待负责人" >
        <el-input v-model=" UpdateMeetingRoom.leader" placeholder="请输入接待负责人" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="department" label="申请部门" >
        <el-select v-model=" UpdateMeetingRoom.department" placeholder="请选择申请部门" style="width: 200px" clearable>
          <el-option label="管理部" value="管理部"></el-option>
          <el-option label="行政部" value="行政部"></el-option>
          <el-option label="IT部" value="IT部"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="location" label="接待地点" >
        <el-input v-model=" UpdateMeetingRoom.location" placeholder="请输入接待地点" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="date" label="接待日期" >
        <el-date-picker
            placeholder="请选择接待日期"
            v-model=" UpdateMeetingRoom.date"
            type="datetime"
            clearable
            style="width: 200px"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item prop="reception" label="接待对象" >
        <el-input v-model=" UpdateMeetingRoom.reception" placeholder="请输入接待对象" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="receptionnumber" label="接待对象人数" >
        <el-input v-model=" UpdateMeetingRoom.receptionnumber" type="number" placeholder="请输入接待对象人数" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="accompany" label="陪同人员" >
        <el-input v-model=" UpdateMeetingRoom.accompany" placeholder="请输入陪同人员" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="accompanynumber" label="陪同人员人数" >
        <el-input v-model=" UpdateMeetingRoom.accompanynumber" type="number" placeholder="请输入陪同人员人数" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="content" label="来访内容" >
        <el-input v-model=" UpdateMeetingRoom.content" placeholder="请输入来访内容" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="support" label="后勤保障" >
        <el-input v-model=" UpdateMeetingRoom.support" placeholder="请输入后勤保障" style="width: 200px" clearable></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="updateSubmit" >提交</el-button>
  </el-dialog>
  <el-dialog
      v-model="getmeetingEdit"
      title="会议招待信息"
      label-width="auto"
  >
    <el-form ref="UpdateMeetingRoomRef"
             :model="UpdateMeetingRoom"
             label-width="auto"
             :inline="true">
      <el-form-item prop="leader" label="接待负责人" >
        <el-input v-model=" UpdateMeetingRoom.leader" disabled placeholder="请输入接待负责人" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="department" label="申请部门" >
        <el-select v-model=" UpdateMeetingRoom.department" disabled placeholder="请选择申请部门" style="width: 200px" clearable>
          <el-option label="管理部" value="管理部"></el-option>
          <el-option label="行政部" value="行政部"></el-option>
          <el-option label="IT部" value="IT部"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="location" label="接待地点" >
        <el-input v-model=" UpdateMeetingRoom.location" disabled placeholder="请输入接待地点" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="date" label="接待日期" >
        <el-date-picker
            placeholder="请选择接待日期"
            v-model=" UpdateMeetingRoom.date"
            type="datetime"
            clearable
            disabled
            style="width: 200px"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item prop="reception" label="接待对象" >
        <el-input v-model=" UpdateMeetingRoom.reception" disabled placeholder="请输入接待对象" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="receptionnumber" label="接待对象人数" >
        <el-input v-model=" UpdateMeetingRoom.receptionnumber" disabled type="number" placeholder="请输入接待对象人数" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="accompany" label="陪同人员" >
        <el-input v-model=" UpdateMeetingRoom.accompany" disabled placeholder="请输入陪同人员" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="accompanynumber" label="陪同人员人数" >
        <el-input v-model=" UpdateMeetingRoom.accompanynumber" disabled type="number" placeholder="请输入陪同人员人数" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="content" label="来访内容" >
        <el-input v-model=" UpdateMeetingRoom.content" disabled placeholder="请输入来访内容" style="width: 200px" clearable></el-input>
      </el-form-item>
      <el-form-item prop="support" label="后勤保障" >
        <el-input v-model=" UpdateMeetingRoom.support" disabled placeholder="请输入后勤保障" style="width: 200px" clearable></el-input>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped>
.bg{
  width: 900px;
  margin-top: 30px;
  margin-left: 10%;
}
</style>